<template>
  <section class="jumbotron">
    <h1 class="jumbotron-heading">Search Github Users</h1>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model = "value"
      />
      <button @click = "searchHandle">Search</button>
    </div>
  </section>
</template>

<script>
import axios from "axios"
export default {
  name: "Header",
  props:["getDataHandle"],
  data(){
    return{
      value: ""
    }
  },
  methods:{
    async searchHandle(){
      //发送请求之前修改数据
      this.getDataHandle({isInit:false , isSearch:true , isSuccess:false , userList:[]})

      //发送请求
      const result = await axios.get(`https://api.github.com/search/users?q=${this.value}`)

      //请求失败修改数据
      if(result.data.items.length === 0){
        this.getDataHandle({isSearch:false , isSuccess:true})
      }

      //请求成功修改数据
      this.getDataHandle({isSearch:false , userList:result.data.items})

    }
  }
};
</script>

<style>
</style>